<template>
  <div class="page-container">
    <div class="common-content-wrap">
      <TrTable
        ref="trTable"
        isNeedSelection
        isNeedIndex
        :btnList="btnList"
        :total="totalNum"
        v-model="searchParams"
        :searchShowList="searchShowList"
        :searchHideList="searchHideList"
        :tableColumn="tableColumn"
        :minSearchLabelWidth="100"
        requestName="searchHandle"
        :tableData="tableData"
        @print="operateHandle($event, 'print')"
        @export="operateHandle($event, 'export')"
        @view="operateHandle($event, 'view')"
        @rowPrint="operateHandle($event, 'rowPrint')"
      />
    </div>
    <TrDetail
      v-model="isShowDetailPopup"
      popupTitle="查看详情"
      :leftList="detailList"
      statusModel="hidden"
      :width="1227"
      :labelWidth="86"
      :detailData="detailData"
      :isNeedFooter="false"
      @close="closeDetailPopup"
    >
      <template #bomTable>
        <TrTable
          isPopup
          isNeedIndex
          v-model="bomSearchParams"
          :isNeedPagination="false"
          :tableData="bomTableData"
          :tableColumn="bomTableColumn"
          requestName="getBomListHandle"
          @viewDeatil="getDetailTableHandle($event)"
        />
        <TrDetail
          v-model="isShowDetailInnerPopup"
          popupTitle="查看详情"
          :leftList="detailInnerList"
          statusModel="hidden"
          :width="1227"
          :isNeedFooter="false"
          :detailData="detailInnerData"
          @close="closeDetailInnerPopup"
        >
          <template #bomTable>
            <TrTable
              isPopup
              isNeedIndex
              :isNeedPagination="false"
              :tableData="bomInnerTableData"
              :total="bomInnerTotal"
              :tableColumn="bomInnerTableColumn"
              requestName="getBomListHandle"
            />
          </template>
        </TrDetail>
      </template>
    </TrDetail>
    <div class="print-wrap">
      <scrapStoragePrint ref="printRef" :printList="printList" />
    </div>
  </div>
</template>

<script>
import {
  getList,
  getEnum,
  getDetail,
  getDetailTable,
  getPrintData,
} from "@/api/logistics/scrapStorage";
import { getColor } from "@/utils/billColor";
import enumData from "@/utils/enumCode.js";
import scrapStoragePrint from "./components/scrapStoragePrint.vue";
import TrTable from "@/components/Tr-table/Tr-table.vue";
import TrDetail from "@/components/Tr-detail/Tr-detail.vue";

export default {
  components: {
    TrTable,
    TrDetail,
    scrapStoragePrint,
  },
  name: "purchaseOrder",
  data: () => ({
    tableColumn: [
      {
        type: "text",
        label: "报废入库单号",
        value: "billCode",
      },
      {
        type: "text",
        label: "生产工单",
        value: "workOrderCode",
      },
      {
        type: "text",
        label: "状态",
        value: "stateName",
      },
      {
        type: "text",
        label: "报废原因",
        value: "scrapReason",
      },
      {
        type: "text",
        label: "仓库名称",
        value: "destWarehouseName",
      },
      {
        type: "text",
        label: "入库人员",
        value: "createUserName",
      },
      {
        type: "text",
        label: "入库时间",
        value: "createTime",
      },
      {
        type: "text",
        label: "审核人员",
        value: "confirmUserName",
      },
      {
        type: "text",
        label: "审核时间",
        value: "confirmTime",
      },
      {
        type: "option",
        label: "操作",
        fixed: "right",
        width: 100,
        showBtnList: [
          {
            label: "查看",
            option: "view",
          },
          {
            label: "打印",
            option: "rowPrint",
          },
        ],
      },
    ],
    searchHideList: [
      {
        id: "billCode",
        type: "input",
        width: 33.33,
        label: "报废入库单号",
        value: "",
      },
      {
        id: "barcode",
        type: "input",
        width: 33.33,
        label: "报废编码",
        value: "",
      },
      {
        id: "materialCode",
        type: "input",
        width: 33.33,
        label: "报废料号",
        value: "",
      },
      {
        label: "报废原因",
        type: "select",
        width: 33.3,
        value: "",
        list: [],
        id: "scrapReason",
      },
      {
        id: "stateList",
        type: "multiSelect",
        width: 33.33,
        label: "入库状态",
        list: [],
        value: [],
      },
    ],
    searchShowList: [
      {
        isNeed: true,
        startStr: "createTimeStart",
        endStr: "createTimeEnd",
        id: "createdTime",
        type: "daterange",
        width: 80,
        label: "创建时间",
        value: [],
        timePeriod: true,
        radio: 1,
      },
    ],
    btnList: [
      {
        label: "打印",
        option: "print",
        color: "blue",
        isRelaTable: true,
      },
      {
        label: "导出",
        option: "export",
        color: "white",
      },
    ],
    tableData: [],
    printList: [],
    searchParams: {
      current: 1,
      size: 10,
    },
    totalNum: 0,
    detailData: {},
    isShowDetailPopup: false,
    detailList: [
      {
        type: "text",
        label: "基础信息",
        list: [
          {
            width: 33.33,
            text: "报废入库单",
            id: "billCode",
          },
          {
            width: 33.33,
            text: "状态",
            id: "stateName",
          },
          {
            width: 33.33,
            text: "仓库名称",
            id: "destWarehouseName",
          },
          {
            width: 33.33,
            text: "报废原因",
            id: "scrapReason",
          },
        ],
      },
      {
        type: "slot",
        slotName: "bomTable",
        label: "废料明细",
        slotBottom: 32,
      },
    ],
    bomSearchParams: {
      current: 1,
      size: 10,
    },
    bomTotal: 0,
    bomTableColumn: [
      {
        type: "text",
        label: "废料料号",
        value: "materialCode",
      },
      {
        type: "text",
        label: "废料名称",
        value: "materialName",
      },
      {
        type: "text",
        label: "合计数量",
        value: "num",
      },
      {
        type: "text",
        label: "数量单位",
        value: "newNumUnit",
      },
      {
        type: "text",
        label: "合计重量",
        value: "weight",
      },
      {
        type: "text",
        label: "重量单位",
        value: "newWeightUnit",
      },
      {
        type: "option",
        label: "操作",
        fixed: "right",
        width: 60,
        showBtnList: [
          {
            label: "查看",
            option: "viewDeatil",
          },
        ],
      },
    ],
    bomTableData: [],
    detailInnerData: {},
    isShowDetailInnerPopup: false,
    detailInnerList: [
      {
        type: "text",
        label: "查看详情",
        list: [
          {
            width: 33.33,
            text: "废料料号",
            id: "materialCode",
          },
          {
            width: 33.33,
            text: "废料名称",
            id: "materialName",
          },
          {
            width: 33.33,
            text: "合计废料",
            id: "materialNumber",
          },
        ],
      },
      {
        type: "slot",
        slotName: "bomTable",
        label: "标签明细",
        slotBottom: 32,
      },
    ],
    bomInnerTotal: 0,
    bomInnerTableColumn: [
      {
        type: "text",
        label: "废料标签",
        value: "barcode",
      },
      {
        type: "text",
        label: "包装规格",
        value: "packageSpec",
      },
      {
        type: "text",
        label: "合计数量",
        value: "num",
      },
      {
        type: "text",
        label: "数量单位",
        value: "newNumUnit",
      },
      {
        type: "text",
        label: "合计重量",
        value: "weight",
      },
      {
        type: "text",
        label: "重量单位",
        value: "newWeightUnit",
      },
      {
        type: "text",
        label: "包装人员",
        value: "packageUserName",
      },
      {
        type: "text",
        label: "包装时间",
        value: "packageTime",
      },
    ],
    bomInnerTableData: [],
  }),
  computed: {
    checkTitle() {
      const titles = {
        add: "新增",
        default: "编辑",
      };
      return titles[this.currentHandle] || titles.default;
    },
    ids() {
      let ids = [];
      this.$refs.trTable.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids;
    },
  },
  mounted() {
    this.getEnmuData();
    this.getDictData();
  },
  methods: {
    async getEnmuData() {
      const { data } = await getEnum(["ScrapBizBillStateEnum"]);
      let purcOrderState = this.$findByProperty(
        this.searchHideList,
        "id",
        "stateList"
      );
      this.$set(purcOrderState, "list", data.data[0].list);
    },
    async getDictData() {
      const { ["MOBILE-SCRAPE-REASON"]: scrapeReasonList } =
        await this.$fetchEnumData([enumData.scrapeReason]);
      let scrapReason = this.$findByProperty(
        this.searchHideList,
        "id",
        "scrapReason"
      );
      let reasonData = scrapeReasonList.map((item) => {
        return {
          ...item,
          value: item.label,
        };
      });
      console.log(reasonData);
      this.$set(scrapReason, "list", reasonData);
    },
    async operateHandle(val, type) {
      this.currentHandle = type;

      this.$validateData(val, 3);

      const actions = {
        print: () => this.printHandle(this.ids),
        export: () =>
          this.$exportHandle({ vm: this, params: this.searchParams }),
        view: () => this.getDetailHandle(val),
        rowPrint: () => this.printHandle([val.id]),
      };

      const action = actions[type];
      if (action) action();
    },
    async printHandle(ids) {
      this.printList = [];
      ids.forEach((item) => {
        getPrintData({
          billId: item,
          current: 1,
          size: 30,
        }).then((res) => {
          if (res.data.code !== 200) return;

          this.$validateData(res.data.data);
          this.printList.push(res.data.data);
        });
      });
      console.log(this.printList);
      await this.$textShow({
        title: "打印",
        content: [this.$t("tip.print")],
      });
      this.$refs.printRef.printHandle();
      this.$refs.trTable.clearSelect();
    },
    async getDetailHandle(val) {
      const { data } = await getDetail({
        billId: val.id,
        current: 1,
        size: 30,
      });
      if (data.code !== 200) return;

      this.$validateData(data.data.records);
      this.$validateData(val);
      this.detailData = val;
      const col = this.$findByProperty(
        this.detailList,
        "id",
        "stateName",
        "list"
      );
      col.valueColor = getColor("DF", val.state);
      this.bomTableData = data.data.records;
      this.bomTableData.forEach((item) => {
        item.newNumUnit = `${item.numUnitCode}(${item.numUnitName})`;
        item.newWeightUnit = `${item.weightUnitCode}(${item.weightUnitName})`;
      });
      this.isShowDetailPopup = true;
    },
    async getDetailTableHandle(val) {
      const { data } = await getDetailTable({
        detailId: val.id,
        current: 1,
        size: 30,
      });

      if (data.code !== 200) return;
      this.$validateData(data.data);
      this.isShowDetailInnerPopup = true;
      this.detailInnerData = {
        materialCode: val.materialCode,
        materialName: val.materialName,
        materialNumber: `${val.num}${val.numUnitCode}(${val.numUnitName})/${val.weight}${val.weightUnitCode}(${val.weightUnitName})`,
      };
      this.bomInnerTableData = data.data.records;
      this.bomInnerTableData.forEach((item) => {
        item.newNumUnit = `${item.numUnitCode}(${item.numUnitName})`;
        item.newWeightUnit = `${item.weightUnitCode}(${item.weightUnitName})`;
      });
      this.bomTotal = Number(data.data.total);
    },
    closeDetailPopup() {
      this.isShowDetailPopup = false;
    },
    closeDetailInnerPopup() {
      this.isShowDetailInnerPopup = false;
    },
    searchHandle() {
      this.getListHandle();
    },
    async getListHandle() {
      const { data } = await getList(this.searchParams);
      console.log(data);
      if (data.code != 200) return;

      this.$validateData(data.data);
      this.tableData = data.data.records;
      this.totalNum = Number(data.data.total);
      this.tableData.forEach((item) => {
        item["stateNameColor"] = getColor("DF", item.state);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.print-wrap {
  position: fixed;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: -999;
  opacity: 0;
}
</style>
